---
title: Svelte
description: Learn how to setup Embla Carousel using Svelte.
order: 3
date: 2021-02-21
---

import { Tabs } from 'components/Tabs/Tabs'
import { TabsItem } from 'components/Tabs/TabsItem'
import { TABS_PACKAGE_MANAGER } from 'consts/tabs'

# Svelte

Embla Carousel provides a wrapper for [Svelte](https://svelte.dev/) that ensures seamless integration of the carousel into your Svelte project and automatic cleanup on component unmount.

Start by installing the Embla Carousel **npm package** and add it to your dependencies.

<Tabs groupId={TABS_PACKAGE_MANAGER.GROUP_ID}>
  <TabsItem tab={TABS_PACKAGE_MANAGER.TABS.NPM}>

```shell
npm install embla-carousel-svelte --save
```

  </TabsItem>
  <TabsItem tab={TABS_PACKAGE_MANAGER.TABS.YARN}>

```shell
yarn add embla-carousel-svelte
```

  </TabsItem>
</Tabs>

---

## The component structure

Embla Carousel provides the handy `emblaCarouselSvelte` action for seamless integration with Svelte. A minimal setup requires an **overflow wrapper** and a **scroll container**. Start by adding the following structure to your carousel:

```html
<script>
  import emblaCarouselSvelte from 'embla-carousel-svelte'
</script>

<div class="embla" use:emblaCarouselSvelte>
  <div class="embla__container">
    <div class="embla__slide">Slide 1</div>
    <div class="embla__slide">Slide 2</div>
    <div class="embla__slide">Slide 3</div>
  </div>
</div>
```

## Styling the carousel

The element with the classname `embla` is needed to cover the scroll overflow. Its child element with the `container` classname is the scroll body that scrolls the slides. Continue by adding the following **CSS** to these elements:

```html
<style>
  .embla {
    overflow: hidden;
  }
  .embla__container {
    display: flex;
  }
  .embla__slide {
    flex: 0 0 100%;
    min-width: 0;
  }
</style>
```

## Accessing the carousel API

The `emblaCarouselSvelte` action takes the Embla Carousel [options](/api/options/) as part of its parameter. Additionally, you can access the [API](/api/) by using the `emblaInit` event to store the carousel instance in a variable:

```html highlight={5,7-10,15-16}
<script>
  import emblaCarouselSvelte from 'embla-carousel-svelte'

  let emblaApi
  let options = { loop: false }

  function onInit(event) {
    emblaApi = event.detail
    console.log(emblaApi.slideNodes()) // Access API
  }
</script>

<div
  class="embla"
  use:emblaCarouselSvelte="{{ options }}"
  onemblaInit="{onInit}"
>
  <div class="embla__container">
    <div class="embla__slide">Slide 1</div>
    <div class="embla__slide">Slide 2</div>
    <div class="embla__slide">Slide 3</div>
  </div>
</div>
```
<Admonition type="note">
  **Note:** Starting with Svelte 5, the `on:` event handlers have been deprecated. However, `on:emblaInit` will remain for backward compatibility.
</Admonition>

## Adding plugins

Start by installing the plugin you want to use. In this example, we're going to install the [Autoplay](/plugins/autoplay/) plugin:

<Tabs groupId={TABS_PACKAGE_MANAGER.GROUP_ID}>
  <TabsItem tab={TABS_PACKAGE_MANAGER.TABS.NPM}>

```shell
npm install embla-carousel-autoplay --save
```

  </TabsItem>
  <TabsItem tab={TABS_PACKAGE_MANAGER.TABS.YARN}>

```shell
yarn add embla-carousel-autoplay
```

  </TabsItem>
</Tabs>

The `emblaCarouselSvelte` action parameter accepts [plugins](/plugins/). Note that plugins need to be passed in an **array** like so:

```html highlight={3,6,9}
<script>
  import emblaCarouselSvelte from 'embla-carousel-svelte'
  import Autoplay from 'embla-carousel-autoplay'

  let options = { loop: false }
  let plugins = [Autoplay()]
</script>

<div class="embla" use:emblaCarouselSvelte="{{ options, plugins }}">
  <div class="embla__container">
    <div class="embla__slide">Slide 1</div>
    <div class="embla__slide">Slide 2</div>
    <div class="embla__slide">Slide 3</div>
  </div>
</div>
```

Congratulations! You just created your first Embla Carousel component.
